<template>
  <div class="task-type" v-loading="loading">
    <div class="task-group-item" v-for="item in types" :key="item.label"
      :style="item.types.length == 3 ? 'flex: 1' : 'margin-right: 16px;'">
      <div class="task-group-item__name">{{ item.label }}</div>
      <div class="task-group-item__data">
        <!-- :style="item.types.length == 3 ? 'flex: 1' : 'margin-left: 16px;'" -->
        <TaskTypeItem v-for="typeItem in item.types" :key="typeItem.label" :data="typeItem"
          :style="item.types.length == 3 ? 'flex: 1' : 'margin-left: 16px;'" :active="taskType == typeItem.type"
          @click="handleClick(typeItem)" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { http } from '@/utils/http'
import TaskTypeItem from './TaskTypeItem.vue'
import { checkRoles } from '@/stores/roles'

const emits = defineEmits(['change'])
const taskType = defineModel({ type: String })
const userStore = useUserStore()
let intervalId
const isMounted = ref(true)

const counts = ref({})
const { loading, request } = useRequest(() => {
  clearInterval(intervalId)

  return http.get('/order/order_task_data_status').then(res => {
    intervalId = setInterval(() => {
      if (isMounted.value) {
        if (!loading.value) request(false)
      }
    }, 10000)
    for (const key in res.data) {
      const item = res.data[key]
      counts.value[key] = [item.all_count, item.success_count, item.fail_count]
    }
  })
})

onMounted(() => {
  if (localStorage.isDev) return
})

onUnmounted(() => {
  isMounted.value = false
  clearInterval(intervalId)
})

const types = computed(() => {
  return [
    {
      label: '出货',
      // style: 'flex:none;width:25%;',
      // types: [{ label: '出货', count: counts.value?._place_order || [0, 0, 0], type: '_place_order' }],
      roles: 'true',
      types: [
        // { label: '即时出货', count: counts.value?._place_order || [0, 0, 0], type: '_place_order' },
        {
          label: '票单',
          count: counts.value?._reservation_order || [0, 0, 0],
          type: '_reservation_order',
          show: true
        },{
          label: '反向出货',
          count: counts.value?._reverse_order || [0, 0, 0],
          type: '_reverse_order',
          show: checkRoles(userStore.user.roles, 'reverse')
        },
      ],
    },
    // {
    //   label: '反向出货',
    //   roles: 'true',
    //   types: [
    //     { label: '反向出货', count: counts.value?._surebets_hand || [0, 0, 0], type: '_surebets_hand',show: true }
    //   ],
    // },
    {
      label: '跟单',
      roles: ['hand_copy','auto_copy'],
      types: [
        { label: '手动跟单', count: counts.value?._copy_order_hand || [0, 0, 0], type: '_copy_order_hand', show: checkRoles(userStore.user.roles, 'hand_copy') },
        { label: '自动跟单', count: counts.value?._copy_order_auto || [0, 0, 0], type: '_copy_order_auto', show: checkRoles(userStore.user.roles, 'auto_copy') },
      ],
    },
  ].filter(item => checkRoles(userStore.user.roles,item.roles))
})

const handleClick = item => {
  taskType.value = item.type
  emits('change', item.type)
}

onMounted(() => {
  console.log(userStore.user.roles);

})
</script>
<style lang="scss" scoped>
.task-type {
  display: flex;
  border-bottom: 1px solid #ebebeb;
}

.task-group-item {
  display: flex;
}

.task-group-item__name {
  width: 40px;
  height: 48px;
  text-align: center;
  padding: 4px 12px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #252a30;
  // 背景渐变从下到上
  // background-image: linear-gradient(to bottom, rgba(183, 189, 198, 0), rgba(183, 189, 198, 0.2));
  font-weight: bold;
  background-image: linear-gradient(to bottom,
      rgba($color: #b7bdc6, $alpha: 0),
      rgba($color: #b7bdc6, $alpha: 0.2));
}

.task-group-item__data {
  flex: 1;
  display: flex;

  font-weight: bold;
}
</style>
